<template>
    <div class="file-page">
        <div class="project-navigation">
            <div class="project-nav-header">
                <Breadcrumb class="text-default" separator=">">
                    <Breadcrumb-item>{{ project_info.name }}</Breadcrumb-item>
                </Breadcrumb>
            </div>
            <section class="nav-body">
                <ul class="nav-wrapper nav nav-underscore pull-left">
                    <li><a class="app" data-app="tasks" @click="goTasks()">任务</a></li>
                    <li class="actives"><a class="app" data-app="works"> 文件 </a></li>
                    <li class=""><a class="app" data-app="build" @click="goPage('/project/build/' + project_id)"> 版本 </a></li>
                </ul>
            </section>
        </div>
        <wrapper-content pageTitle="文件库">
            <div slot="page-action" class="page-action">
                <div class="filter-content vertical-middle">
                    <Upload ref="upload"
                            :action="upload_config.url"
                            :name="upload_config.name"
                            :headers="upload_config.headers"
                            :data="upload_config.data"
                            :show-upload-list="false"
                            :on-progress="uploadProgress"
                            :on-success="uploadSuccess">
                        <Button type="text" icon="arrow-up-a" @click="upload_file_modal = !upload_file_modal">上传</Button>
                    </Upload>
                    <div class="search-input">
                        <Input class="search-input" v-model="list_keyword" icon="ios-search-strong" placeholder="搜索"/>
                    </div>
                </div>
            </div>
            <div class="data-content">
                <Row>
                    <i-col>
                        <div class="file-content" style="background-color: #FFF;padding-bottom: 50px;">
                            <div class="library-header vertical-middle">
                                <span class="muted"  v-if="select_files.length > 0">
                                    <span class="library-count">已选择 {{ select_files.length }} 项</span>
                                    <a class="muted" @click="batchDownloadFile">
                                        <Icon type="ios-download-outline" size="16"></Icon> 下载
                                    </a>
                                    <a class="muted">
                                        <Icon type="ios-trash-outline" size="16"></Icon> 删除
                                    </a>
                               </span>
                            </div>
                            <Table
                                    :columns="file_columns"
                                    :data="file_list"
                                    :row-class-name="rowClass"
                                    @on-selection-change="selectItem"
                                    class="no-border-table">
                            </Table>
                        </div>
                    </i-col>
                </Row>
            </div>
        </wrapper-content>
        <Modal
                v-model="delete_file_modal"
                title="操作提示">
            <p>确定要永远删除这个文件吗？删除后无法恢复</p>
            <div slot="footer">
                <Button type="text" @click="delete_file_modal = false">再想想</Button>
                <Button type="error" :loading="send_loading" @click="confirmDelTaskFile">删了</Button>
            </div>
        </Modal>
    </div>
</template>
<style>
    .file-page .wrapper-content {
        /*position: fixed;*/
        padding: 130px 240px 0 240px;
        height: 100%;
    }

    .file-page .wrapper-content .data-content {
        margin-top: 0;
    }

    .file-content {
        background: #f5f5f5;
    }

    .file-content .link-icon {
        font-size: 32px;
    }

    .file-page .ivu-tooltip-popper {
        position: absolute !important;
    }

    .file-page .library-header {
        padding: 15px 0 0 0;
        font-size: 15px;
        height: 62px;
    }
    .file-page .library-header a{
        padding-right: 15px;
    }

    .file-page .library-title {
        font-size: 18px;
    }

    .file-page .library-count {
        padding: 6px 15px;
    }

</style>
<script type="es6">
  import WrapperContent from '../../../components/wrapper-content.vue'
  import axios from 'axios'
  import * as utils from '../../../assets/js/utils'
  import {format} from "../../../assets/js/file_format";
  import * as Time from '../../../assets/js/time_format'
  import $ from 'jquery'
  import _ from 'lodash'

  export default {
    components: {
      WrapperContent,
    },
    data() {
      let select_list = []
      return {
        upload_file_modal: false,
        delete_file_modal: false,
        send_loading: false,
        file_id: 0,
        file_index: 0,
        select_files: [],
        list_keyword: '',
        project_info: {},
        project_id: this.$route.params.project_id,
        file_list: [],
        file_columns: [
          //todo 增加多选，批量删除，批量下载（打包zip后下载）
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '名称',
            width: 450,
            key: 'old_file_name',
            render: (h, params) => {
              return h('div',{
                class: 'vertical-middle'
              }, [
                h('svg', {
                  class: 'icon link-icon m-r'
                }, [
                  h('use', {
                    attrs: {
                      href: this.formatFile(params.row.extension)
                    }
                  })
                ]),
                h('span', params.row.title)
              ])
            }
          },
          {
            title: '大小',
            key: 'file_size',
            sortable: true,
            render: (h, params) => {
              return h('span',
                params.row.size / 1000 + 'KB')
            }
          },
          {
            title: '创建者',
            key: 'user_info',
            render: (h, params) => {
              return h('span',
                params.row.user_info.realname)
            }
          },
          {
            title: '更新时间',
            key: 'add_time',
            sortable: true,
            render: (h, params) => {
              return h('Tooltip', {
                props: {
                  content: this.showFileTime(params.row.addedDate, false),
                  placement: 'top'
                }
              }, [
                h('span', this.showFileTime(params.row.addedDate, true))
              ])
            }
          },
          {
            title: ' ',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              return h('div',[
                h('Tooltip',{
                  props: {
                    content: '下载',
                    placement: 'top'
                  }
                },[
                  h('Icon', {
                    props: {
                      type: 'ios-download-outline',
                      size: '24'
                    },
                    class: 'table-row-icon',
                    nativeOn: {
                      click: () => {
                        this.downloadFile(params.row.id)
                      }
                    }
                  })
                ]),
                h('Tooltip',{
                  props: {
                    content: '更新',
                    placement: 'top'
                  }
                },[
                  h('Icon', {
                    props: {
                      type: 'ios-upload-outline',
                      size: '24'
                    },
                    class: 'table-row-icon',
                    nativeOn: {
                      click: () => {
                        this.editItem(params.row.project_id)
                      }
                    }
                  })
                ]),
                h('Tooltip',{
                  props: {
                    content: '重命名',
                    placement: 'top'
                  }
                },[
                  h('Icon', {
                    props: {
                      type: 'ios-compose-outline',
                      size: '24'
                    },
                    class: 'table-row-icon',
                    nativeOn: {
                      click: () => {
                        this.editItem(params.row.project_id)
                      }
                    }
                  })
                ]),
                h('Tooltip',{
                  props: {
                    content: '删除',
                    placement: 'top'
                  }
                },[
                  h('Icon', {
                    props: {
                      type: 'ios-trash-outline',
                      size: '24'
                    },
                    class: 'table-row-icon',
                    nativeOn: {
                      click: () => {
                        this.delete_file_modal = true
                        this.file_id = params.row.id
                        this.file_index = params.index
                      }
                    }
                  })
                ])
              ])
            }
          }
        ],
        rowClass(row, index) {
          return 'file-row-class';
        },
        upload_config: {
          url: utils.getUploadUrl('Project_Task.uploadTaskFile'),
          headers: {
            token: utils.getStore('token')
          },
          name: 'file',
          data: {
            //todo 上传文件
//            id: 163
          }
        },
      }
    },
    watch: {
      list_keyword: function () {
        this.search()
      },
      '$route'(to, from) { // 路由监听，重新获取数据
        if (this.$store.state.list_reload) {
          this.getList()
        }
      }
    },
    created: function () {
      this.getList()
      this.getProjectInfo()
    },
    methods: {
      search: _.debounce(
        function () {
          this.page_num = 1
          this.getList()
        },
        // 这是我们为等级停止输入等待的毫秒数
        500
      ),
      getList() {
        let app = this
        utils.sendAjax({
          url: 'Project_Project.getProjectFileList',
          data: {
            keyword: app.list_keyword,
            project_id: app.project_id,
          },
          success: function (res) {
            app.file_list = res.data.list
          }
        });
      },
      getProjectInfo() {
        let app = this
        utils.sendAjax({
          url: 'Project_Project.getInfo',
          data: {
            project_id: this.project_id
          },
          success: function (res) {
            app.project_info = res.data
          }
        });
      },
      confirmDelTaskFile(){
        let app = this
        this.send_loading = true
        utils.sendAjax({
          url: 'Project_Task.delTaskFile',
          data: {
            file_id: this.file_id
          },
          success: function (res) {
            app.send_loading = false
            app.delete_file_modal = false
            app.file_list.splice(app.file_index,1)
          }
        });
      },
      selectItem(selection) {
        let app = this
        app.select_files = []
        $.each(selection, function (k, v) {
          app.select_files.push(v.id)
        });
      },
      formatFile(file_ext) {
        return format(file_ext)
      },
      downloadFile(file_id) {
        window.open(utils.getDirectUrl('Project_Task.downloadTaskFile&file_id=' + file_id))
      },
      batchDownloadFile() {
        window.open(utils.getFullUrl('Project_Project.batchDownloadTaskFile&ids=' + JSON.stringify(this.select_files)))
      },
      showFileTime(time, prettyTime) {
        if (prettyTime) {
          return Time.showBeforeTime(time)
        } else {
          return Time.showBeforeTime(time, false)
        }
      },
      uploadProgress ( event, file, fileList) {
        let app = this
        this.send_loading = true
        setTimeout(function () {
          if(app.send_loading) {
            app.$Message.loading({
              content: '正在上传，请稍后...',
              duration: 10
            })
          }
        },500)
      },
      uploadSuccess(response, file, fileList){
        let result = utils.showBack(response)
        this.send_loading = false
        if (result) {
          this.$Message.destroy()
          this.$Message.success({
            content: '上传文件成功',
            duration: 3
          })
          this.getList()
        } else {
          this.$Message.destroy()
          this.$Message.error({
            content: response.msg,
            duration: 3
          })
          this.$refs.upload.fileList.splice(fileList.indexOf(file), 1)
        }
      },
      goTasks() {
        const url = '/project/task/' + this.project_id + '?project_name=' + this.project_info.name
        this.$router.push(url)
      },
      goPage(url) {
        this.$router.push(url)
      },
    },
  };
</script>
